import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class HealthTrackingPage extends StatefulWidget {
  const HealthTrackingPage({Key? key}) : super(key: key);

  @override
  State<HealthTrackingPage> createState() => _HealthTrackingPageState();
}

class _HealthTrackingPageState extends State<HealthTrackingPage> {
  @override
  void initState() {
    super.initState();
    // 设置状态栏颜色
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Color(0xFF1DC4A0),
      statusBarIconBrightness: Brightness.light,
    ));
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 确保在页面切换时也保持状态栏颜色
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Color(0xFF1DC4A0),
      statusBarIconBrightness: Brightness.light,
    ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部绿色背景区域
            Container(
              padding:
                  EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
              color: const Color(0xFF1DC4A0),
              child: Row(
                children: [
                  IconButton(
                    icon: Icon(Icons.arrow_back, color: Colors.white),
                    onPressed: () => Navigator.pop(context),
                    padding: EdgeInsets.zero,
                  ),
                  SizedBox(width: 10),
                  Text(
                    '健康跟踪',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
            ),

            // 白色圆角背景
            // Container(
            //   decoration: BoxDecoration(
            //     color: Colors.white,
            //     borderRadius: BorderRadius.only(
            //       bottomLeft: Radius.circular(30),
            //       bottomRight: Radius.circular(30),
            //     ),
            //     boxShadow: [
            //       BoxShadow(
            //         color: Colors.black.withOpacity(0.1),
            //         blurRadius: 10,
            //         offset: Offset(0, 3),
            //       ),
            //     ],
            //   ),
            //   child: Padding(
            //     padding: const EdgeInsets.all(20),
            //     child: Row(
            //       children: [
            //         // 用户头像
            //         Container(
            //           width: 50,
            //           height: 50,
            //           decoration: BoxDecoration(
            //             shape: BoxShape.circle,
            //             color: Colors.amber,
            //           ),
            //           child: Center(
            //             child: Icon(
            //               Icons.person,
            //               color: Colors.white,
            //               size: 30,
            //             ),
            //           ),
            //         ),
            //         SizedBox(width: 15),
            //         // 用户信息
            //         Text(
            //           '早上好，用户a',
            //           style: TextStyle(
            //             fontSize: 18,
            //             fontWeight: FontWeight.bold,
            //           ),
            //         ),
            //       ],
            //     ),
            //   ),
            // ),
            SizedBox(height: 40),
            // 健康数据卡片区域
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(15),
                child: GridView.count(
                  crossAxisCount: 2,
                  crossAxisSpacing: 15,
                  mainAxisSpacing: 15,
                  childAspectRatio: 0.8,
                  children: [
                    _buildHealthCard(
                      title: '步数',
                      value: '7.384',
                      unit: 'Steps',
                      color: Color(0xFF3D4B96),
                      icon: 'assets/icons/home.png',
                      progress: 0.75,
                      progressColor: Color(0xFF00EFEF),
                      onTap: () =>
                          Navigator.pushNamed(context, '/steps_detail'),
                    ),
                    _buildHealthCard(
                      title: '体重',
                      value: '48.5kg',
                      unit: 'kg',
                      color: Color(0xFFDFB172),
                      icon: 'assets/icons/home.png',
                      onTap: () =>
                          Navigator.pushNamed(context, '/weight_detail'),
                    ),
                    _buildHealthCard(
                      title: '血压',
                      value: '144/72',
                      unit: 'mmHg',
                      color: Color(0xFFFF6B7A),
                      icon: 'assets/icons/home.png',
                      onTap: () => Navigator.pushNamed(
                          context, '/blood_pressure_detail'),
                    ),
                    _buildHeartRateCard(
                      title: '心率',
                      value: '86',
                      unit: 'bpm',
                      color: Color(0xFFFF4C79),
                      icon: 'assets/icons/home.png',
                      onTap: () =>
                          Navigator.pushNamed(context, '/heart_rate_detail'),
                    ),
                  ],
                ),
              ),
            ),

            // 底部导航栏
            // Container(
            //   padding: const EdgeInsets.symmetric(vertical: 12),
            //   decoration: BoxDecoration(
            //     color: Colors.white,
            //     boxShadow: [
            //       BoxShadow(
            //         color: Colors.black.withOpacity(0.1),
            //         blurRadius: 10,
            //         offset: const Offset(0, -2),
            //       ),
            //     ],
            //   ),
            //   child: Row(
            //     mainAxisAlignment: MainAxisAlignment.spaceAround,
            //     children: [
            //       _buildNavItem(
            //         iconPath: 'assets/icons/home.png',
            //         label: '首页',
            //         isSelected: false,
            //         onTap: () =>
            //             Navigator.pushReplacementNamed(context, '/home1_3'),
            //       ),
            //       _buildNavItem(
            //         iconPath: 'assets/icons/calendar.png',
            //         label: '服药日程',
            //         isSelected: false,
            //         onTap: () => Navigator.pushReplacementNamed(
            //             context, '/medication_schedule'),
            //       ),
            //       _buildNavItem(
            //         iconPath: 'assets/icons/notification.png',
            //         label: '消息',
            //         isSelected: false,
            //         onTap: () => Navigator.pushReplacementNamed(
            //             context, '/notification'),
            //       ),
            //       _buildNavItem(
            //         iconPath: 'assets/icons/profile.png',
            //         label: '我的',
            //         isSelected: false,
            //         onTap: () =>
            //             Navigator.pushReplacementNamed(context, '/profile'),
            //       ),
            //     ],
            //   ),
            // ),
          ],
        ),
      ),
    );
  }

  Widget _buildHealthCard({
    required String title,
    required String value,
    required String unit,
    required Color color,
    required String icon,
    double progress = 0,
    Color progressColor = Colors.blue,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(15),
        ),
        padding: EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            Expanded(
              child: Center(
                child: progress > 0
                    ? Stack(
                        alignment: Alignment.center,
                        children: [
                          SizedBox(
                            width: 100,
                            height: 100,
                            child: CircularProgressIndicator(
                              value: progress,
                              strokeWidth: 10,
                              backgroundColor: Colors.white.withOpacity(0.3),
                              valueColor:
                                  AlwaysStoppedAnimation<Color>(progressColor),
                            ),
                          ),
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(
                                value,
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 24,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                unit,
                                style: TextStyle(
                                  color: Colors.white70,
                                  fontSize: 12,
                                ),
                              ),
                            ],
                          ),
                        ],
                      )
                    : Text(
                        value,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 28,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
              ),
            ),
            if (progress == 0)
              Text(
                unit,
                style: TextStyle(
                  color: Colors.white70,
                  fontSize: 12,
                ),
              ),
          ],
        ),
      ),
    );
  }

  Widget _buildHeartRateCard({
    required String title,
    required String value,
    required String unit,
    required Color color,
    required String icon,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(15),
        ),
        padding: EdgeInsets.all(15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(
                color: Colors.white,
                fontSize: 16,
                fontWeight: FontWeight.bold,
              ),
            ),
            Expanded(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 心率波形图
                    SizedBox(
                      height: 60,
                      child: CustomPaint(
                        size: Size(double.infinity, 60),
                        painter: HeartRateChartPainter(),
                      ),
                    ),
                    SizedBox(height: 10),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.baseline,
                      textBaseline: TextBaseline.alphabetic,
                      children: [
                        Text(
                          value,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 28,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(width: 5),
                        Text(
                          unit,
                          style: TextStyle(
                            color: Colors.white70,
                            fontSize: 12,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNavItem({
    required String iconPath,
    required String label,
    required bool isSelected,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            iconPath,
            width: 24,
            height: 24,
            color: isSelected ? const Color(0xFF1DC4A0) : Colors.grey,
          ),
          const SizedBox(height: 8),
          Text(
            label,
            style: TextStyle(
              color: isSelected ? const Color(0xFF1DC4A0) : Colors.grey,
              fontSize: 12,
              fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
            ),
          ),
        ],
      ),
    );
  }
}

class HeartRateChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.white
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    final path = Path();

    // 绘制心电图样式
    final segmentWidth = size.width / 12;

    path.moveTo(0, size.height / 2);
    path.lineTo(segmentWidth, size.height / 2);
    path.lineTo(segmentWidth * 1.5, size.height * 0.4);
    path.lineTo(segmentWidth * 2, size.height * 0.9);
    path.lineTo(segmentWidth * 2.5, size.height * 0.1);
    path.lineTo(segmentWidth * 3, size.height * 0.6);
    path.lineTo(segmentWidth * 3.5, size.height / 2);
    path.lineTo(segmentWidth * 5, size.height / 2);
    path.lineTo(segmentWidth * 5.5, size.height * 0.4);
    path.lineTo(segmentWidth * 6, size.height * 0.7);
    path.lineTo(segmentWidth * 6.5, size.height * 0.2);
    path.lineTo(segmentWidth * 7, size.height * 0.6);
    path.lineTo(segmentWidth * 7.5, size.height / 2);
    path.lineTo(segmentWidth * 9, size.height / 2);
    path.lineTo(segmentWidth * 9.5, size.height * 0.3);
    path.lineTo(segmentWidth * 10, size.height * 0.8);
    path.lineTo(segmentWidth * 10.5, size.height * 0.2);
    path.lineTo(segmentWidth * 11, size.height * 0.5);
    path.lineTo(segmentWidth * 12, size.height / 2);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
